<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>注册</title>
    <link rel="stylesheet" href="../css/注册.css">
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function(){
           
            $("#span1").text("用户名长度为6-20");
            $("#span1").css('background-color','green');
            $("#span2").text("密码长度为6-20");
            $("#span2").css('background-color','green');
            $("input").on('change',function(){
                if($('span').background=='red'){
                    $("span").text(" ");
                    $("span").css('background-color','white');
                }
            });
            $("#username").on('keyup',function(){
                $length1=$("#username").val().length;
                $("#username").on('change',function(){
                    if($length1==0){
                        $("#span1").text("用户名不能为空");
                        $("#span1").css('background-color','red');
                    }
                    else if($length1>=1&&$length1<6){
                        $("#span1").text("用户名长度为6-20");
                        $("#span1").css('background-color','red');
                    }
                    else {
                        $("#span1").text("用户名输入成功");
                        $("#span1").css('background-color','green');
                    }
                    
                })
                if($length1>=1&&$length1<6){
                    $("#span1").text("用户名长度为6-20");
                    $("#span1").css('background-color','red');
                }
                else if($length1>=6){
                    $("#span1").text("");
                    $("#span1").css('background-color','white');
                }
            })
            $("#password").on('keyup',function(){
                $length2=$("#password").val().length;
                console.log($length2);
                $("#password").on('change',function(){
                    if($length2==0){
                        $("#span2").text("密码不能为空");
                        $("#span2").css('background-color','red');
                    }
                    else if($length2<6){
                        $("#span2").text("密码输入错误");
                        $("#span2").css('background-color','red');
                    }
                    else{
                        $("#span2").text("密码输入成功");
                        $("#span2").css('background-color','green');
                    }
                })
                if($length2>0&&$length2<6){
                    $("#span2").text("密码长度为6-20");
                    $("#span2").css('background-color','red');
                }
                else if($length2>=6&&$length2<=10){
                    $("#span2").text("密码强度弱");
                    $("#span2").css('background-color','orange');
                }else if($length2>10&&$length2<=15){
                    $("#span2").text("密码强度中");
                    $("#span2").css('background-color','greenyellow');
                }else if($length2>=16&&$length2<=20){
                    $("#span2").text("密码强度强");
                    $("#span2").css('background-color','green');
                }
            });
            $("#email").on('keyup',function(){
                $length3=$("#email").val().length;
                var email=$.trim($("#email").val());
                var patt=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                console.log(email);
                $("#email").on('change',function(){
                    if($length3==0){
                        $("#span3").text("邮箱不能为空");
                        $("#span3").css('background-color','red');
                    }
                    if(patt.test(email)){
                        $("#span3").text("用户邮箱输入成功");
                        $("#span3").css('background-color','green');
                    }else{
                        $("#span3").text("用户邮箱输入错误");
                        $("#span3").css('background-color','red');
                    }
                })
                if(patt.test(email)){
                    $("#span3").text("正确邮箱格式");
                    $("#span3").css('background-color','green');
                }
                else{
                    $("#span3").text("非法邮箱格式");
                    $("#span3").css('background-color','red');
                }
            });
            $("#phone").on('keyup',function(){
                $length4=$("#phone").val().length;
                var phone=$.trim($("#phone").val());
                var patt=/^1[34578]\d{9}$/;
                console.log($length4);
                if(patt.test(phone)){
                    $("#span4").text("正确手机格式");
                    $("#span4").css('background-color','green');
                }else{
                    $("#span4").text("非法手机格式");
                    $("#span4").css('background-color','red');
                }
                $("#phone").on('change',function(){
                    if($length4==0){
                        $("#span4").text("手机号码不能为空");
                        $("#span4").css('background-color','red');
                    }
                    if($length4>=1&&$length4<11){
                        $("#span4").text("手机号码输入错误");
                        $("#span4").css('background-color','red');
                    }
                    else if(patt.test(phone)){
                        $("#span4").text("手机号码输入成功");
                        $("#span4").css('background-color','green');
                    }
                });
            });
        });
    </script>


    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="header-page">
        <div class="container">
            <div class="logo">
                <a href="首页.html">
                    <img src="../img/logo.png" alt="M宝商城" style="height: 40px;">
                </a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="center">
                <div class="logo-form">
                    <legend>
                        用户注册
                        <small class="right" style="font-size:85%;">
                            已有账号
                            <a href="../html/登录.html" class="btn">立即登录</a>
                        </small>
                    </legend>
                </div>
                <form action="../lib/reg.php" method="POST" class="col-xs-8">
                    <fieldset>
                        <div class="form-group">
                            <label for="username" class="col-xs-3">用户名</label>
                            <input type="text" maxlength="20" placeholder="请输入用户名" name="username" id="username" class="col-xs-6">
                            <span id="span1"></span><br></div>
                        <div class="form-group">
                            <label for="password"  class="col-xs-3">用户密码</label>
                            <input type="password" maxlength="20" placeholder="请输入用户密码" name="password" id="password"  class="col-xs-6">
                            <span id="span2"></span><br></div>
                        <div class="form-group">
                            <label for="email"  class="col-xs-3">用户邮箱</label>
                            <input type="text" maxlength="20" placeholder="请输入用户邮箱" name="email" id="email" class="col-xs-6">
                            <span id="span3"></span><br></div>
                        <div class="form-group">
                            <label for="phone" class="col-xs-3">用户手机</label>
                            <input type="text" maxlength="11" placeholder="请输入用户手机号码" name="phone" id="phone"  class="col-xs-6">
                            <span id="span4"></span><br></div>
                        <div class="form-group">
                            <input type="submit" class="col-xs-6" value="注册"></div> 
                            
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
     <!-- 底部 -->
    <footer id="footer" style="background: #444;">
        <div class="container">
            <div id="map">
                <ul class="col-xs-12">
                    <li class="col-xs-2">
                        <a href="">
                            <i><img src="../img/map1.png" alt=""></i>
                            <h4>帮助中心</h4>
                        </a>
                        <p>积分规则 邀请规则</p>
                    </li>
                    <li class="col-xs-2">
                        <a href="">
                            <i><img src="../img/map2.png" alt=""></i>
                            <h4>购物指南</h4>
                        </a>
                        <p>免费注册 快速下单</p>
                    </li>
                    <li class="col-xs-2">
                        <a href="">
                            <i><img src="../img/map3.png" alt=""></i>
                            <h4>售后服务</h4>
                        </a>
                        <p>售后政策 取消订单</p>
                    </li>
                    <li class="col-xs-2">
                        <a href="">
                            <i><img src="../img/map4.png" alt=""></i>
                            <h4>正品保障</h4>
                        </a>
                        <p>正品行货 放心选购</p>
                    </li>
                </ul>
            </div>
            <div id="info">
                <a href="">关于我们</a><em>|</em>
                <a href="">购物指南</a><em>|</em>
                <a href="">售后服务</a>
            </div>
            <div id="copyright">
                <p>©  M宝商城  凯盛嘉业网络科技有限公司   粤ICP备17071557号-1   增值电信业务经营许可证：粤B2-20170758  食品经营许可证：JY14401060269164(1-1)</p>
            </div>    
        </div>
    </footer>    
     


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
    